<!--
* @description 手机端-配方
* @fileName peifang.vue
* @author huangyu
* @date 2022/07/01 15:07:50
!-->
<template>
    <div>
        <van-sticky>
            <van-search v-model="name" placeholder="请输入物品关键词" @search="changeData" @cancel="changeData" />
            <div>
                <van-dropdown-menu>
                    <van-dropdown-item v-model="type" :options="option1" @change="changeData" />
                    <van-dropdown-item v-model="pinzhi" :options="option2" @change="changeData" />
                    <van-dropdown-item title="熟练度" ref="item">
                        <van-cell center>
                            <template #right-icon>
                                <van-field v-model="min" placeholder="请输入最小值" />
                            </template>
                        </van-cell>
                        <van-cell center>
                            <template #right-icon>
                                <van-field v-model="max" placeholder="请输入最大值" />
                            </template>
                        </van-cell>
                        <div style="padding: 5px 16px;">
                            <van-button type="info" block round @click="onConfirm">
                                确认
                            </van-button>
                        </div>
                    </van-dropdown-item>
                </van-dropdown-menu>
            </div>
        </van-sticky>

        <div style="margin:10px 0;">
            <van-cell value="" v-for="(item,index) in list" :key="index" is-link  :url="`https://aioncodex.com/cn/recipe/${item.number}`">
                <el-row>
                    <el-col :span="4">
                        <div class="icon" :style="{background:'url(/aion/images/game/icon/items/'+item.icon+')',width:'40px',height:'40px',display:'inline-block'}" v-if="item.icon"></div>
                    </el-col>
                    <el-col :span="20">
                        <div>
                            <div v-if="item.pinzhi=='英雄'" class="item_grade_5"><strong>{{item.name}}</strong></div>
                            <div v-if="item.pinzhi=='唯一'" class="item_grade_4"><strong>{{item.name}}</strong></div>
                            <div v-if="item.pinzhi=='传说'" class="item_grade_3"><strong>{{item.name}}</strong></div>
                            <div v-if="item.pinzhi=='稀有'" class="item_grade_2"><strong>{{item.name}}</strong></div>
                            <div v-if="item.pinzhi=='普通'" class="item_grade_1"><strong>{{item.name}}</strong></div>
                        </div>
                        <div style="color:#999">{{item.type}} {{item.pinzhi}} {{item.pNum}}</div>
                    </el-col>
                </el-row>
            </van-cell>
        </div>

        <van-pagination v-model="pageindex" :total-items="total" :items-per-page="pagesize" @change="changePage" />
    </div>
</template>

<script>
// import { Toast } from 'vant';
import { get } from '@/common/app.js'
export default {
    components: {},
    data() {
        return {
            showDetail: false,
            detailModel: {},
            list: [],
            currentPage: 1,

            pageindex: 1,
            pagesize: 20,
            total: 0,
            
            name: '',
            type: '',
            pinzhi: '',
            min: '',
            max: '',

            option1: [
                { text: '配方类型', value: '' },
                { text: '武器制作', value: '武器制作' },
                { text: '金属盔甲', value: '金属盔甲' },
                { text: '裁缝', value: '裁缝' },
                { text: '手工', value: '手工' },
                { text: '炼金', value: '炼金' },
                { text: '料理', value: '料理' },
            ],
            option2: [
                { text: '物品品质', value: '' },
                { text: '英雄', value: '英雄' },
                { text: '唯一', value: '唯一' },
                { text: '传说', value: '传说' },
                { text: '稀有', value: '稀有' },
                { text: '普通', value: '普通' },
            ],
        }
    },
    mounted() {
        this.getData()
    },
    methods: {
        getData(){
            let params = {
                type: 'getAionPeiFang',
                data: {
                    name: this.name,
                    min: this.min,
                    max: this.max,
                    pinzhi: this.pinzhi,
                    type: this.type,
                    pageIndex: this.pageindex,
                    pageSize: this.pagesize,
                },
            }
            get('game',params).then(res=>{
                if(res){
                    this.list = res.list
                    this.total = res.total
                }
            })
        },
        changeData(){
            this.pageindex = 1
            this.getData()
        },

        changePage(value){
            this.pageIndex = value
            this.getData()
        },
        onConfirm(){
            this.$refs.item.toggle()
            this.changeData()
        },
    },
}
</script>

<style scoped>
</style>